<template>
  <!-- 香草 -->
  <div class="vanilla">
    <!-- 100C股票信息 -->
    <div class="stock">
      <p class="stock-l">
        <span class="call">100call1M</span>
        <span class="M">{{call100Data.now_price }}</span>
        <span
          class="M"
          :style="{color:call100Data.zhangfu>0?'#EB4436':'#0E9D58'}"
        >{{ call100Data.zhangfu }}</span>
        <span class="history" @click="searchHistory">查看历史</span>
      </p>
    </div>
    <div class="tables">
      <el-table
        :data="tableData"
        :border="true"
        :cell-style="changeCellStyle"
        :highlight-current-row="true"
        :expand-row-keys="expands"
        :row-key="getRowKeys"
        @expand-change="expandChange"
        ref="table"
        :key="tablekey"
        size="mini"
        @row-click="getOpenDetail"
        stripe
      >
        <el-table-column fixed="left" prop="cycle" label="周期/结构" align="center" :resizable="false">
          <template slot-scope="scope">
            <p style="margin:0">
              <span
                style="color:#1E2024;border-bottom:1px solid #1E2024;font-size:14px;font-weight:600;margin-right:10px"
              >
                {{
                scope.row.cycle }}
              </span>
              <el-popover placement="right" width="850" trigger="click">
                <div class="headpopover">
                  <p>{{ scope.row.cycle }}明细报价</p>
                  <el-button
                    class="btn share"
                    icon="el-icon-share"
                    @click="stockseditDialog = true"
                    round
                  >分享</el-button>
                </div>
                <el-table
                  :data="getMore"
                  ref="myTable"
                  key="3"
                  class="myTable"
                  :cell-style="editchangeCellStyle"
                  type="mini"
                  height="300"
                  :border="true"
                >
                  <el-table-column
                    prop="company_name"
                    align="center"
                    width="90"
                    label="券商/结构"
                    :resizable="false"
                  ></el-table-column>
                  <el-table-column
                    v-for="( item, index ) in aliasname_list"
                    :key="index"
                    :label="item.aliasname"
                    align="center"
                    :resizable="false"
                    width="73"
                  >
                    <template slot-scope="scope">
                      <span>
                        {{
                        scope.row?.price_list[ index ]?.price
                        ? scope.row?.price_list[ index ]?.price
                        : "--"
                        }}
                      </span>
                    </template>
                  </el-table-column>
                </el-table>
                <span
                  style="cursor: pointer;color:#E93030"
                  slot="reference"
                  @click="tree(scope.row)"
                >明细</span>
              </el-popover>
              <!-- 
              -->
            </p>
          </template>
        </el-table-column>
        <el-table-column
          v-for="( item, index ) in aliasname_list"
          :key="index"
          :label="item.aliasname"
          align="center"
          :resizable="false"
          width="75"
        >
          <template slot-scope="scope">
            <span>
              {{
              scope.row?.list[ index ]?.price
              ? scope.row?.list[ index ]?.price
              : "--"
              }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="提示" :visible.sync="historyDialog" width="600px" :show-close="false">
      <template slot="title">
        <div class="myHeader">
          <div class="myHeader_text">
            <span class="broker">{{ this.$parent.securitiesMsg.name }}</span>
            <span class="code">{{ this.$parent.securitiesMsg.stockcode }}</span>
            <span style="color:#E93030">周期1M</span>
          </div>
          <div class="myHeader_rightText">
            <span
              class="tabs"
              :class="activeName == '折线图' ? 'active' : ''"
              @click="changeTabs('折线图')"
            >折线图</span>
            <span
              class="tabs"
              :class="activeName == '列表' ? 'active' : ''"
              @click="changeTabs('列表')"
            >列表</span>
          </div>
        </div>
      </template>
      <div class="historyTable" v-if="activeName == '列表'">
        <el-table
          :data="call100Data.new_day_list"
          ref="myTable"
          key="5"
          class="myTable"
          :cell-style="changeCellStyle"
          type="mini"
          height="300"
          :border="true"
        >
          <el-table-column prop="date" align="center" width="120" :resizable="false" label="日期/结构"></el-table-column>
          <el-table-column
            v-for="( item, index ) in call100Data.jiegous"
            :key="index"
            :label="item.name"
            align="center"
            :resizable="false"
          >
            <template slot-scope="scope">
              <span>
                {{
                scope.row.price_list[ index ]
                ? scope.row.price_list[ index ]
                : "--"
                }}
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="historychart" v-if="activeName == '折线图'">
        <div class="historychart_head"></div>
        <div class="historychart_main" id="main"></div>
      </div>
    </el-dialog>
    <el-dialog title="场外个股期权报价" :visible.sync="stocksDialog" width="600px" class="stocksDialog">
      <div class="centent" id="view">
        <el-table
          :data="tableData"
          :border="true"
          :cell-style="changeCellStyle"
          :highlight-current-row="true"
          :expand-row-keys="expands"
          :row-key="getRowKeys"
          @expand-change="expandChange"
          ref="table"
          :key="tablekey"
          size="mini"
          @row-click="getOpenDetail"
        >
          <el-table-column
            fixed="left"
            prop="cycle"
            label="周期/结构"
            align="center"
            width="90"
            :resizable="false"
          >
            <template slot-scope="scope">
              <p>
                <span
                  style="color:#1E2024;border-bottom:1px solid #1E2024;margin-right:10px"
                >{{ scope.row.cycle }}</span>
                <el-popover placement="right" width="700" trigger="click">
                  <div class="headpopover">
                    <p>{{ scope.row.cycle }}明细报价</p>
                    <el-button icon="el-icon-upload2" @click="stocksDialog = true">分享</el-button>
                  </div>
                  <el-table
                    :data="getMore"
                    ref="myTable"
                    key="3"
                    class="myTable"
                    :cell-style="changeCellStyle"
                    type="mini"
                    height="300"
                    :border="true"
                  >
                    <el-table-column
                      prop="company_name"
                      align="center"
                      width="120"
                      :resizable="false"
                    ></el-table-column>
                    <el-table-column
                      v-for="( item, index ) in aliasname_list"
                      :key="index"
                      :label="item.aliasname"
                      align="center"
                      :resizable="false"
                    >
                      <template slot-scope="scope">
                        <span>
                          {{
                          scope.row?.price_list[ index ]?.price
                          ? scope.row?.price_list[ index ]?.price
                          : "--"
                          }}
                        </span>
                      </template>
                    </el-table-column>
                  </el-table>
                  <span
                    style="cursor: pointer;color:#E93030"
                    slot="reference"
                    @click="tree(scope.row)"
                  >明细</span>
                </el-popover>
                <!-- 
                -->
              </p>
            </template>
          </el-table-column>
          <el-table-column
            v-for="( item, index ) in aliasname_list"
            :key="index"
            :label="item.aliasname"
            align="center"
            :resizable="false"
            width="60"
          >
            <template slot-scope="scope">
              <span>
                {{
                scope.row?.list[ index ]?.price
                ? scope.row?.list[ index ]?.price
                : "--"
                }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer">
          <div class="footer_left">
            <p style="color:#111111;font-size:15px">中信证券 600030 香草结构</p>
            <p style="color:#6F6F6F;font-size:12px">报价日期：2023年 4月12 日</p>
            <p style="color:#333333;font-size:12px;margin-bottom:0">风险优先 盈利无限</p>
            <p style="color:#333333;font-size:12px;margin-top:0">请关注场外期权大数据公众号</p>
          </div>
          <div class="footer_right">
            <img src alt />
            <p>扫一扫二维码打开或分享给好友</p>
          </div>
        </div>
      </div>
      <div class="sub">
        <el-button @click="shareWitFriends">分享给好友</el-button>
      </div>
    </el-dialog>
    <el-dialog title="场外个股期权报价" :visible.sync="stockseditDialog" width="600px" class="stocksDialog">
      <div class="centent" id="editview">
        <el-table
          :data="getMore"
          ref="myTable"
          key="3"
          class="myTable"
          :cell-style="changeCellStyle"
          type="mini"
          height="300"
          :border="true"
        >
          <el-table-column prop="company_name" align="center" width="120" :resizable="false"></el-table-column>
          <el-table-column
            v-for="( item, index ) in aliasname_list"
            :key="index"
            :label="item.aliasname"
            align="center"
            :resizable="false"
          >
            <template slot-scope="scope">
              <span>
                {{
                scope.row.price_list[ index ].price
                ? scope.row.price_list[ index ].price
                : "--"
                }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="footer">
          <div class="footer_left">
            <p style="color:#111111;font-size:15px">中信证券 600030 香草结构</p>
            <p style="color:#6F6F6F;font-size:12px">报价日期：2023年 4月12 日</p>
            <p style="color:#333333;font-size:12px;margin-bottom:0">风险优先 盈利无限</p>
            <p style="color:#333333;font-size:12px;margin-top:0">请关注场外期权大数据公众号</p>
          </div>
          <div class="footer_right">
            <img src alt />
            <p>扫一扫二维码打开或分享给好友</p>
          </div>
        </div>
      </div>
      <div class="sub">
        <el-button @click="editshareWitFriends">分享给好友</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import html2canvas from "html2canvas";
import { detail_data, price, call100 } from "@/api/index";
import * as echarts from "echarts";
export default {
  name: "Geometry1Vanilla",
  props: {
    code: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      tableData: [],
      expands: [],
      getRowKeys(row) {
        return row.id;
      },
      aliasname_list: [],
      price_list: [],
      getMore: [],
      tablekey: 1,
      historyDialog: false,
      activeName: "折线图",
      stocksDialog: false,
      stockseditDialog: false,
      call100Data: {}
    };
  },
  methods: {
    getOpenDetail(row, column, e) {
      this.$refs.table.store.loadOrToggle(row);
      if (column.label !== "周期/结构") return;
      this.$refs.table.toggleRowExpansion(row);
    },
    changeCellStyle(row) {
      if (row.column.label == "周期/结构" || row.column.label == "日期/结构") {
        return "text-align:center;font-size:13px;height:32px;padding:0px";
      } else {
        return "color: #1570e8;font-size:13px;height:32px;padding:0px";
      }
    },
    editchangeCellStyle({ row, rowIndex }) {
      if (rowIndex == 0) {
        return "color:rgb(233, 48, 48);text-align:center;font-size:13px;height:32px;padding:0px";
      } else {
        return "text-align:center;font-size:13px;height:32px;padding:0px";
      }
    },
    async herb() {
      const res = await detail_data({ code: this.code });
      if (res.code === 1) {
        this.aliasname_list = res.data.aliasname_list;
        res.data.price_list.map((item, index) => {
          item.id = index;
          return item;
        });
        this.tableData = res.data.price_list;
        this.getcall100();
      }
    },
    expandChange(row, expandedRows) {
      console.log(row.cycle);
      let that = this;
      if (expandedRows.length) {
        that.expands = [];
        if (row) {
          this.tree(row);
          that.expands.push(row.id);
          this.$refs?.myTable?.$forceUpdate();
        }
      } else {
        that.expands = [];
      }
    },
    async tree(value) {
      console.log(value);
      this.getMore.length = 0;
      const { data } = await price({
        code: this.$parent.code,
        cycle: value.cycle
      });

      const datas = Object.values(data);
      this.getMore = [
        {
          company_name: "最优报价",
          price_list: value.list
        }
      ];
      this.getMore.push(...datas);
      console.log(this.getMore);
    },
    searchHistory() {
      this.historyDialog = true;
      this.$nextTick(() => {
        this.initchart();
      });
    },
    changeTabs(val) {
      this.activeName = val;
      if (this.activeName !== "折线图") return false;
      +this.$nextTick(() => {
        this.initchart();
      });
    },
    initchart() {
      var myChart = echarts.init(document.getElementById("main"));
      var option = {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.call100Data.date_data
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top: "3%",
          containLabel: true
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: this.call100Data.price_data,
            type: "line",
            areaStyle: {}
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
    shareWitFriends() {
      html2canvas(document.getElementById("view"), {
        scale: 2,
        dpi: 300
      }).then(canvas => {
        const link = canvas.toDataURL("image/jpg");
        const file = document.createElement("a");
        file.style.display = "none";
        file.href = link;
        file.download = decodeURI(
          `香草报价_${
            this.code ? this.code : "000001"
          }_${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`
        );
        document.body.appendChild(file);
        file.click();
        document.body.removeChild(file);
      });
    },
    editshareWitFriends() {
      html2canvas(document.getElementById("editview"), {
        scale: 2, // 处理模糊问题
        dpi: 300 // 处理模糊问题
      }).then(canvas => {
        const link = canvas.toDataURL("image/jpg");
        const file = document.createElement("a");
        file.style.display = "none";
        file.href = link;
        file.download = decodeURI(
          `香草报价明细_${
            this.code ? this.code : "000001"
          }_${new Date().getFullYear()}-${new Date().getMonth()}-${new Date().getDate()}`
        );
        document.body.appendChild(file);
        file.click();
        document.body.removeChild(file);
      });
    },
    async getcall100() {
      const { data } = await call100({
        code: this.$parent.securitiesMsg.stockcode
      });
      this.call100Data = data;
    }
  }
};
</script>

<style lang="less" scoped>
.vanilla {
  width: 100%;
  height: 100%;
  padding: 15px 30px 20px 15px;
  box-sizing: border-box;

  .stock {
    text-align: left;

    .stock-l {
      margin-right: 32px;
      margin-top: 0;

      .call {
        font-size: 15px;
        font-weight: 500;
        color: #1e2024;
        padding-right: 5px;
      }

      .M {
        font-size: 15px;
        font-weight: 500;
        color: #e93030;
        padding-right: 5px;
        margin: 0 12px;
      }

      .history {
        font-size: 15px;
        font-weight: 400;
        color: #ff8133;
        cursor: pointer;
      }
    }

    .stock-r {
      line-height: 39px;

      .names {
        font-size: 10px;
        color: #e93030;
        width: 26px;
        height: 20px;
        float: left;
        margin-right: 5px;
        line-height: 12px;
        margin-top: 5px;
      }

      .myriad {
        font-size: 18px;
        color: #e93030;
        margin-right: 5px;
      }

      .percent {
        font-size: 16px;
        color: #e93030;
      }
    }
  }

  .tables {
    .myTable {
      /deep/ .el-table__body-wrapper {
        overflow-x: hidden;

        .el-table__expand-column {
          border-left: unset !important;
        }
      }
    }
  }

  /deep/ .el-table--border th.el-table__cell:hover {
    background: #ddd;
  }

  /deep/ .el-table th.el-table__cell {
    background: #f4f4f4;
    font-weight: unset;
    color: #1e2024;
    height: 50px;
    cursor: pointer;
  }

  .myHeader {
    display: flex;
    justify-content: space-between;

    &_rightText {
      width: 20%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .myHeader_text {
      width: 45%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .broker {
      font-size: 21px;
      color: #111;
    }

    .code {
      font-size: 20px;
      color: #111;
    }

    .tabs {
      cursor: pointer;
    }

    .active {
      color: #165dff;
      border-bottom: 1px solid #165dff;
    }
  }

  .historychart {
    width: 100%;
    height: 240px;

    &_head {
      width: 100%;
      height: 30px;
    }

    &_main {
      width: 100%;
      height: 210px;
    }
  }
}

.headpopover {
  display: flex;
  justify-content: space-between;
  align-items: center;

  /deep/ .el-button {
    width: 57px;
    height: 23px;
    border-color: #999;
    padding: 4px 2px;
    font-size: 12px;
  }
}

.stocksDialog {
  .el-dialog__body {
    padding: 0 0;
  }

  .centent {
    padding: 30px 20px;
  }

  .footer {
    height: 150px;
    display: flex;
    align-items: flex-end;

    &_left {
      width: 50%;

      p {
        text-align: left;
      }
    }

    &_right {
      width: 50%;
      text-align: right;

      img {
        width: 70px;
        height: 70px;
      }

      p {
        color: #6f6f6f;
        font-size: 12px;
      }
    }
  }
}
</style>